<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit:cover" />
    <title>Document</title>
    <!-- <link rel="stylesheet" href="../js/base.js"> -->
</head>

<body>
    <div class="list">
        <div class="top">
            <div class="left">
                <img src="../images/list/230h61.png" alt="">
            </div>
            <div class="writing">COURSE</div>
            <div class="right">
                <img src="../images/list/170h61.png" alt="">
            </div>
            <!-- <img src="../images/list/top.jpg" alt=""> -->
        </div>
        <div class="content">
            <div class="box">
                <div class="left">
                    <img src="../images/list/tus2.png" alt="">
                </div>
                <div class="right">
                    <h3>POPlNG常规课 （简单）独立课</h3>
                    <p class="p1">【D】西溪直营店</p>
                    <p class="p2">周三 &nbsp;14：00 - 15：00</p>
                </div>
                <div class="btn">预约</div>
            </div>
            <div class="box1">
                <div class="left">
                    <img src="../images/list/tus.png" alt="">
                </div>
                <div class="right">
                    <h3>POPlNG常规课 （简单）独立课</h3>
                    <p class="p1">【D】西溪直营店</p>
                    <p class="p2">周三 &nbsp;14：00 - 15：00</p>
                </div>
                <div class="btn">预约</div>
            </div>
            <div class="box1">
                <div class="left">
                    <img src="../images/list/tus3.png" alt="">
                </div>
                <div class="right">
                    <h3>POPlNG常规课 （简单）独立课</h3>
                    <p class="p1">【D】西溪直营店</p>
                    <p class="p2">周三 &nbsp;14：00 - 15：00</p>
                </div>
                <div class="btn">预约</div>
            </div>
            <div class="box1">
                <div class="left">
                    <img src="../images/list/tus2.png" alt="">
                </div>
                <div class="right">
                    <h3>POPlNG常规课 （简单）独立课</h3>
                    <p class="p1">【D】西溪直营店</p>
                    <p class="p2">周三 &nbsp;14：00 - 15：00</p>
                </div>
                <div class="btn">预约</div>
            </div>
            <div class="box1">
                <div class="left">
                    <img src="../images/list/tus.png" alt="">
                </div>
                <div class="right">
                    <h3>POPlNG常规课 （简单）独立课</h3>
                    <p class="p1">【D】西溪直营店</p>
                    <p class="p2">周三 &nbsp;14：00 - 15：00</p>
                </div>
                <div class="btn">预约</div>
            </div>
            <div class="box1">
                <div class="left">
                    <img src="../images/list/tus3.png" alt="">
                </div>
                <div class="right">
                    <h3>POPlNG常规课 （简单）独立课</h3>
                    <p class="p1">【D】西溪直营店</p>
                    <p class="p2">周三 &nbsp;14：00 - 15：00</p>
                </div>
                <div class="btn">预约</div>
            </div>
            <div class="box1">
                <div class="left">
                    <img src="../images/list/tus3.png" alt="">
                </div>
                <div class="right">
                    <h3>POPlNG常规课 （简单）独立课</h3>
                    <p class="p1">【D】西溪直营店</p>
                    <p class="p2">周三 &nbsp;14：00 - 15：00</p>
                </div>
                <div class="btn">预约</div>
            </div>
            <div class="box1">
                <div class="left">
                    <img src="../images/list/tus.png" alt="">
                </div>
                <div class="right">
                    <h3>POPlNG常规课 （简单）独立课</h3>
                    <p class="p1">【D】西溪直营店</p>
                    <p class="p2">周三 &nbsp;14：00 - 15：00</p>
                </div>
                <div class="btn">预约</div>
            </div>

            <div class="mark">
                FUNK&nbsp;MASTERS
            </div>
        </div>
        <div class="tab">
            <div class="icos">
                <img src="../images/kecheng_153.jpg" alt="">
                <div>FKM</div>
            </div>
            <div class="ico">
                <img src="../images/kecheng_16.jpg" alt="">
                <div>课程</div>
            </div>
            <div class="ico">
                <img src="../images/kecheng_18.jpg" alt="">
                <div>商城</div>
            </div>
            <div class="ico">
                <img src="../images/kecheng_208.jpg" alt="">
                <div>大事记</div>
            </div>
            <div class="ico">
                <img src="../images/kecheng_22.jpg" alt="">
                <div>会员</div>
            </div>
        </div>
    </div>
</body>

</html>
<script type="text/javascript">
    function adapter() {
        //获取布局视口宽度，因为开启了理想视口，布局视口=设备横向独立像素值
        const dpWidth = document.documentElement.clientWidth
            //计算根字体大小
        const rootFonstSize = (dpWidth * 100) / 750
            //设置根字体大小
        document.documentElement.style.fontSize = rootFonstSize + 'px'
    }
    adapter()
    window.onresize = adapter
</script>

<style lang="less">
    @import url(../css/list.css);
</style>